<template>
	<!-- 这里我需要横向滑动，每页显示2行4列数据，样式 -->
	<swiper class="swiper-box" @change="handleSwiperChange" :style="{ height: `${swiperHeight}rpx` }">
		<!-- item定义不同的高度，滑动item时，swiper随着item的高度变化，这该怎么写样式？ -->
		<swiper-item class="item1">
			<view class="category">
				<navigator class="category-item" hover-class="none" url="/pages/index/index" v-for="item in 5"
					:key="item">
					<image class="icon"
						src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1348576427264204965.png">
					</image>
					<view>
						<text class="text">主要模块</text>
					</view>
				</navigator>
			</view>
		</swiper-item>
		<swiper-item class="item2">
			<view class="category">
				<navigator class="category-item" hover-class="none" url="/pages/index/index" v-for="item in 10"
					:key="item">
					<image class="icon"
						src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1348576427264204985.png">
					</image>
					<view>
						<text class="text">功能模块</text>
					</view>
				</navigator>
			</view>
		</swiper-item>
	</swiper>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	const swiperHeight = ref(150)

	const handleSwiperChange : UniHelper.SwiperOnChange = (e) => {
		if (e.detail.current === 0) {
			swiperHeight.value = 150;

		} else if (e.detail.current === 1) {
			swiperHeight.value = 320;
		}
	}

	//
</script>
<style lang="scss" scoped>
	.swiper-box {
		/* 高度自适应*/
		widht: 100vw;
		.item1 {
			height: 150rpx;
			/* 设置第一个 swiper-item 的高度 */
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item2 {
			height: 320rpx;
			/* 设置第二个 swiper-item 的高度 */
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.secondary {
		height: 310rpx;
	}

	/* 前台类目 */
	.category {
		margin: 20rpx 0 0;
		padding: 10rpx 0;
		display: flex;
		flex-wrap: wrap;
		min-height: 328rpx;

		.category-item {
			width: 150rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			.icon {
				width: 100rpx;
				height: 100rpx;
			}

			.text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>